<!-- 告警通知模式 -->
<template>
    <div class="q-pa-md row justify-between items-center" style="min-height:90px;">
        <div class="col-lg-3 col-md-3 col-sm-3 col-xs-12 row items-center">
            <q-select dense outlined options-dense v-model="value" :options="option" style="width:160px;"
                @blur="changeModel(value, 1)" class="q-ml-md" />
        </div>
        <div class="col-lg-9 col-md-9 col-sm-9 col-xs-12 row">
            <q-radio size="xs" v-model="shape" :val="1" label="禁止通知" disable />
            <q-radio size="xs" v-model="shape" :val="2" label="全天" disable />
            <q-radio size="xs" v-model="shape" :val="3" label="自定义区间" disable />
            <div v-if="timeShow" class="row">
                <div class="q-ml-md" v-if="browser == 'Chrome' || browser == 'Safari' || browser == 'Edge'">
                    <div class="text-center">开始时间</div>
                    <input type="time" v-model="startTime" class="time q-pl-lg text-center"
                        :class="startTime == null || startTime == '' ? 'text-white' : 'text-black'" readonly />
                </div>
                <div class="q-ml-md" style="max-width:120px;" v-else>
                    <div class="text-center">开始时间</div>
                    <q-input dense outlined v-model="startTime" style="flex:1;" disable>
                        <template v-slot:append>
                            <q-icon name="access_time" class="cursor-pointer">
                                <q-popup-proxy transition-show="scale" transition-hide="scale">
                                    <q-time v-model="startTime">
                                        <div class="row items-center justify-end">
                                            <q-btn v-close-popup label="确定" color="primary" flat />
                                        </div>
                                    </q-time>
                                </q-popup-proxy>
                            </q-icon>
                        </template>
                    </q-input>
                </div>
                <div class="q-ml-md" v-if="browser == 'Chrome' || browser == 'Safari' || browser == 'Edge'">
                    <div class="text-center">结束时间</div>
                    <input type="time" v-model="endTime" class="time q-pl-lg text-center"
                        :class="endTime == null || endTime == '' ? 'text-white' : 'text-black'" readonly />
                </div>
                <div class="q-ml-md" style="max-width:120px;" v-else>
                    <div class="text-center">结束时间</div>
                    <q-input dense outlined v-model="endTime" style="flex:1;" disable>
                        <template v-slot:append>
                            <q-icon name="access_time" class="cursor-pointer">
                                <q-popup-proxy transition-show="scale" transition-hide="scale">
                                    <q-time v-model="endTime">
                                        <div class="row items-center justify-end">
                                            <q-btn v-close-popup label="确定" color="primary" flat />
                                        </div>
                                    </q-time>
                                </q-popup-proxy>
                            </q-icon>
                        </template>
                    </q-input>
                </div>
            </div>
        </div>
    </div>
    <!-- 添加/编辑 弹出对话框 -->
    <q-dialog v-model="isAddOrUpdate" persistent @mousedown="dialogDrag($event, 1)" @mousemove="dragIcon($event)">
        <q-card class="card-style">
            <!-- 对话框的头部 -->
            <q-card-section class="row items-center q-pb-none">
                <div class="text-h6">{{ modelTitle }}</div>
                <q-space />
                <q-btn icon="close" flat round dense @click="isAddOrUpdate = false"></q-btn>
            </q-card-section>
            <!-- 对话框的主体-->
            <q-card-section>
                <q-form ref="form" class="q-pa-sm dialog-form-container">
                    <div class="row">
                        <span class="q-mt-sm"><span class="text-red q-mr-xs">*</span>模式名称：</span>
                        <q-input outlined dense v-model="form.mode_name" />
                    </div>
                    <div class="row q-mt-sm">
                        <span class="q-mt-sm">通知类型：</span>
                        <q-radio size="xs" v-model="form.notice_type" :val="1" label="禁止通知" />
                        <q-radio size="xs" v-model="form.notice_type" :val="2" label="全天" />
                        <q-radio size="xs" v-model="form.notice_type" :val="3" label="自定义区间" />
                    </div>
                    <div class="row q-mt-sm" v-if="form.notice_type == 3">
                        <span class="q-mt-sm">开始时间:</span>
                        <div class="q-ml-md" v-if="browser == 'Chrome' || browser == 'Safari' || browser == 'Edge'">
                            <input type="time" v-model="start_time" class="time2"
                                :class="start_time == null || start_time == '' ? 'text-white' : 'text-black'" />
                        </div>
                        <div class="q-ml-md" style="max-width:205px;" v-else>
                            <q-input dense outlined v-model="start_time">
                                <template v-slot:append>
                                    <q-icon name="access_time" class="cursor-pointer">
                                        <q-popup-proxy transition-show="scale" transition-hide="scale">
                                            <q-time v-model="start_time">
                                                <div class="row items-center justify-end">
                                                    <q-btn v-close-popup label="确定" color="primary" flat />
                                                </div>
                                            </q-time>
                                        </q-popup-proxy>
                                    </q-icon>
                                </template>
                            </q-input>
                        </div>
                    </div>
                    <div class="row q-mt-sm" v-if="form.notice_type == 3">
                        <span class="q-mt-sm">结束时间:</span>
                        <div class="q-ml-md" v-if="browser == 'Chrome' || browser == 'Safari' || browser == 'Edge'">
                            <input type="time" v-model="stop_time" class="time2"
                                :class="stop_time == null || stop_time == '' ? 'text-white' : 'text-black'" />
                        </div>
                        <div class="q-ml-md" style="max-width:205px;" v-else>
                            <q-input dense outlined v-model="stop_time">
                                <template v-slot:append>
                                    <q-icon name="access_time" class="cursor-pointer">
                                        <q-popup-proxy transition-show="scale" transition-hide="scale">
                                            <q-time v-model="stop_time">
                                                <div class="row items-center justify-end">
                                                    <q-btn v-close-popup label="确定" color="primary" flat />
                                                </div>
                                            </q-time>
                                        </q-popup-proxy>
                                    </q-icon>
                                </template>
                            </q-input>
                        </div>
                    </div>
                </q-form>
            </q-card-section>
            <!-- 对话框的底部 -->
            <q-card-actions align="right">
                <q-btn unelevated label="取消" type="reset" style="color: #686868;" outline
                    @click="isAddOrUpdate = false" />
                <q-btn outline label="确定" type="submit" color="primary" @click="submit" />
            </q-card-actions>
        </q-card>
    </q-dialog>
    <!-- 删除 提示框 -->
    <DeleteDialog :isShowDelete="isShowDelete" :tipInfo="tipInfo" @closeDeleteDialog="closeDeleteDialog"
        @confirmDelete="confirmDelete" />
</template>

<script>
import { getWarnMode, upDateWarnMode, setWarnMode, delWarnMode } from '/src/api/systemtWarning'
import DeleteDialog from 'src/components/deleteDialog/index'
import drag from 'src/components/mixins/drag.js'

export default {
    mixins: [drag],
    data() {
        return {
            ModelId: 0,
            shape: 1,
            value: '',
            modelTitle: '',
            option: [],
            startTime: '',
            endTime: '',
            tipInfo: '是否删除这条通知模式',
            timeShow: false,
            isAddOrUpdate: false,
            isShowDelete: false,
            browser: '',
            id: 0,
            form: {
                mode_name: '',
                notice_type: 1,
                is_select: true,
            },
            start_time: '',
            stop_time: '',
        };
    },

    components: {
        DeleteDialog
    },
    watch: {
        shape: {
            immediate: true,
            handler(val) {
                if (val && val == 3) {
                    this.timeShow = true;
                } else {
                    this.timeShow = false;
                }
            },
        }
    },
    computed: {},

    mounted() {
        this.getInter();
        this.getModel();
    },

    methods: {
        // 判断当前浏览器
        getInter() {
            var explorer = navigator.userAgent;
            if (explorer.indexOf("MSIE") >= 0) {
                //ie
                this.browser = "ie"
            } else if (explorer.indexOf("Firefox") >= 0) {
                //firefox
                this.browser = "firefox"
            } else if (explorer.indexOf("Chrome") >= 0) {
                //Chrome
                this.browser = "Chrome"
            } else if (explorer.indexOf("Opera") >= 0) {
                //Opera
                this.browser = "Opera"
            } else if (explorer.indexOf("Safari") >= 0) {
                //Safari
                this.browser = "Safari"
            } else if (explorer.indexOf("Netscape") >= 0) {
                //Netscape
                this.browser = "Netscape"
            } else if (explorer.indexOf("Trident") >= 0) {
                //Edge
                this.browser = "Edge"
            }
        },
        // 获取数据
        getModel() {
            this.option = []
            let num = 0
            getWarnMode(this.id).then(res => {
                const { status, data } = res
                if (status == 200) {
                    data.map(item => {
                        let obj = {
                            id: item.id,
                            label: item.mode_name,
                            notice_type: item.notice_type,
                            type_name: item.type_name,
                            start_time: item.start_time,
                            stop_time: item.start_time,
                        }
                        this.option.push(obj)
                        if (item.is_select) {
                            num++
                            this.ModelId = item.id;
                            this.value = item.mode_name
                            this.shape = item.notice_type
                            if (this.browser == 'Chrome' || this.browser == 'Safari' || this.browser == 'Edge') {
                                this.startTime = item.start_time
                                this.endTime = item.stop_time
                            } else {
                                this.startTime = item.start_time
                                this.endTime = item.stop_time
                            }
                        }
                    })
                    if (num == 0) {
                        this.changeModel(this.option[0], 0)
                    }
                }
            })
        },
        // 打开添加弹框
        add() {
            this.isAddOrUpdate = true;
            this.modelTitle = '添加告警模式'
            this.form = {}
        },
        // 添加一个模式
        submit() {
            if (this.form.notice_type == 3) {
                this.form.start_time = this.start_time
                this.form.stop_time = this.stop_time
            }
            if (this.modelTitle == '添加告警模式') {
                this.form.is_select = true
                upDateWarnMode(this.form).then(res => {
                    const { status, data } = res
                    if (status == 200) {
                        this.$q.notify({
                            type: 'positive',
                            position: 'top',
                            message: `成功添加一条告警模式！`
                        })
                        this.isAddOrUpdate = false;
                        this.getModel();
                    }
                })
            } else {
                setWarnMode(this.ModelId, this.form).then(res => {
                    const { status, data } = res
                    if (status == 200) {
                        this.$q.notify({
                            type: 'positive',
                            position: 'top',
                            message: `修改模式成功！`
                        })
                        this.isAddOrUpdate = false;
                        this.getModel();
                    }
                })
            }
        },
        // 切换模式
        changeModel(item, flag) {
            if (item.hasOwnProperty('id')) {
                let data = {
                    is_select: true
                }
                setWarnMode(item.id, data).then(res => {
                    const { status, data } = res
                    if (status == 200 && flag) {
                        this.$q.notify({
                            type: 'positive',
                            position: 'top',
                            message: `修改模式成功！`
                        })
                    }
                    this.getModel();
                })
            }

        },
        // 修改模式
        changeItem() {
            this.isAddOrUpdate = true;;
            this.modelTitle = '编辑告警模式';
            this.form.mode_name = this.value;
            this.form.notice_type = this.shape
            this.start_time = this.startTime
            this.stop_time = this.endTime
        },
        // 打开删除弹框
        deleteModel() {
            this.isShowDelete = true;
        },
        // 删除通知模式
        confirmDelete() {
            delWarnMode(this.ModelId).then(res => {
                if (res.status == 200) {
                    this.isShowDelete = false
                    this.$q.notify({
                        type: 'positive',
                        position: 'top',
                        message: res.msg
                    })
                    this.getModel();
                }
            })
        },
        // 关闭删除提示框
        closeDeleteDialog() {
            this.isShowDelete = false
        },
    }
}

</script>
<style lang='scss' scoped>
.time {
    width: 120px;
    height: 30px;
    border-radius: 4px;
    border: 1px solid #e5e5e5;
}

.time2 {
    width: 180px;
    height: 40px;
    border-radius: 4px;
    border: 1px solid #e5e5e5;
}
</style>
